<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/txx.js"></script>
    <script src="js/login.js"></script>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
<div id="app">
    <txx></txx>
        <main class="c900 el-card" style="align-items: stretch; width: 600px; padding: 30px 50px">
            <h2>用户注册</h2>
            <el-form label-width="80px" label-position="left">
                <el-form-item label-width="0px" style="margin-bottom: 0px">
                    <div class="flex" style="align-items: stretch">
                        <el-form label-width="80px" label-position="left" style="width:340px">
                            <el-form-item label="账号: ">
                                <el-input placeholder="账号" v-model="form.username"></el-input>
                            </el-form-item>
                            <el-form-item label="密码: ">
                                <el-input type="password" placeholder="密码" v-model="form.pwd"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码: ">
                                <el-input type="password" placeholder="确认密码" v-model="form.repwd"></el-input>
                            </el-form-item>
                            <el-form-item label="昵称: ">
                                <el-input placeholder="昵称" v-model="form.cname"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-popover width="400" trigger="click" placement="top-end">
                            <!-- 图片显示区域 -->
                            <el-image slot="reference" :src="form.image" fit="cover" style="margin-right: 10px; width: 180px; height: 226px">
                                <span slot="error" class="fbox border1">提交图片</span>
                            </el-image>

                            <!-- 文件上传区域 -->
                            <div>
                                <!-- 隐藏的文件输入元素 -->
                                <!--<input type="file" ref="fileInput" @change="handleFileUpload" style="display: none;" />-->

                                <!-- 输入框和上传按钮 -->
                                <el-input placeholder="粘贴图片" v-model="form.image">
                                    <!--<el-button slot="append" @click="triggerFileUpload">上传图片</el-button>-->
                                </el-input>

                                <!-- 这里可以显示上传的图片预览或者上传进度等信息 -->
                            </div>
                        </el-popover>
                    </div>
                </el-form-item>
                <el-form-item label="邮箱: ">
                    <el-input placeholder="邮箱" v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item style="text-align: right; margin-right: 10px">
                    <el-link href="login.html" :underline="false">去登陆</el-link>
                    <el-button type="primary" @click="reg">注册</el-button>
                </el-form-item>
            </el-form>
        </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            form:{
                username:"",
                pwd:"",
                repwd:"",
                cname:"",
                email:"",
                image:""
            },
            previewImage:""
        },
        created() {},
        methods : {
            /*upload(){
                let p = new URLSearchParams()
                p.append("file", this.form.image)
                axios.post("upload/upload",p).then(res=>{
                    if (res.data.code == 1) {
                        this.$message(res.data.msg)
                    }else{
                        this.$alert(res.data.msg)
                    }
                })
            },*/
            // triggerFileUpload() {
            //     // 触发文件选择对话框
            //     this.$refs.fileInput.click();
            // },
            /*handleFileUpload(event) {
                const file = event.target.files[0];
                if (file && file.type.startsWith('image/')) {
                    // 使用FileReader读取图片文件并生成预览URL
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.previewImage = e.target.result; // 设置预览图片的URL
                    };
                    // 把上传图片转换成打他 url形式，使其可以在网页上显示
                    reader.readAsDataURL(file); // 读取文件内容作为DataURL
                } else {
                    this.$message.error('请选择有效的图片文件');
                }
            },*/
            reg(){
                let p = new URLSearchParams()
                p.append("username", this.form.username);
                p.append("pwd", this.form.pwd);
                p.append("repwd", this.form.repwd);
                p.append("cname", this.form.cname);
                p.append("email", this.form.email);
                p.append("image", this.form.image);
                axios.post("login/reg", p).then(res=>{
                    if (res.data.code == 1) {
                        this.$message(res.data.msg)
                    }else{
                        this.$alert(res.data.msg)
                    }
                })
            }
        }
    })
</script>
</body>
</html>
<style>
    .el-form-item .el-form-item {
        margin-bottom: 22px
    }
</style>
